<!DOCTYPE html>
<html>
<head>
	<title>Single</title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/magnifier.css">
	<!-- Custom Theme files -->
	<!--theme-style-->
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<script src="js/jquery-3.3.1.js"></script>
	<script src="layer/layer.js"></script>
	<script type="text/javascript" src="js/magnifier.js"></script>


	<!---->
</head>
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="col-sm-4 logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="col-sm-4 header-left" style="width: 400px">
				<div id="userInfo">
				</div>
				<div class="cart box_1">
					<a href="checkout.html">
						<h3>
							<div class="total">
								<img src="images/cart.png" alt=""/>
							</div>
						</h3>
					</a>
					<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="container">
		<div class="head-top">
			<div class="col-sm-2 number">
				<span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
			</div>
			<div class="col-sm-8 h_menu4">
				<ul class="memenu skyblue">
					<li class=" grid"><a  href="index.html">主页</a></li>
					<li><a  href="products.html">男子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
											<li><a style="color: black" href="products.html">泳裤</a></li>
											<li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">篮球</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">足球/篮球</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="products.html">女子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">球类</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="typo.html">品牌</a></li>
					<li><a class="color6" href="">联系我们</a></li>
				</ul>
			</div>
			<div class="col-sm-2 search">
				<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
			</div>
			<div class="clearfix"> </div>
			<!---pop-up-box---->
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login">
						<input type="submit" value="">
						<input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
					</div>
					<p>	Shopping</p>
				</div>
			</div>
			<script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
			</script>
			<!---->
		</div>
	</div>
</div>
<!---->
<div class="single">

	<div class="container">
		<div class="col-md-9" style="width: 100%">
			<div class="col-md-5 grid">
				<div class="magnifier" id="magnifier1" style="margin: auto;">
					<div class="magnifier-container">
						<div class="images-cover"></div>
						<!--当前图片显示容器-->
						<div class="move-view"></div>
						<!--跟随鼠标移动的盒子-->
					</div>
					<div class="magnifier-assembly">
						<div class="magnifier-btn">
							<span class="magnifier-btn-left">&lt;</span>
							<span class="magnifier-btn-right">&gt;</span>
						</div>
						<!--按钮组-->
						<div class="magnifier-line">
							<ul class="clearfix animation03">
								<li>
									<div id="imageUrl1" class="small-img">
									</div>
								</li>
								<li>
									<div id="imageUrl2" class="small-img">
									</div>
								</li>
								<li>
									<div id="imageUrl3" class="small-img">
									</div>
								</li>
								<li>
									<div id="imageUrl4" class="small-img">
									</div>
								</li>
							</ul>
						</div>
						<!--缩略图-->
					</div>
					<div class="magnifier-view"></div>
					<!--经过放大的图片显示容器-->
				</div>
			</div>
			<div class="col-md-7 single-top-in">
				<div class="single-para simpleCart_shelfItem">
					<div id="productName">
						<!--商品名-->
					</div>
					<p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
					<div class="star-on">
						<ul>
							<li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
							<li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
							<li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
							<li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
							<li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
						</ul>
						<div class="review">
							<a href="#"> 3 条评论 </a>/
							<a href="#"> 写评论 </a>
						</div>
						<div class="clearfix"> </div>
					</div>

					<div id="productPrice">
						<!--商品价格-->
					</div>


					<div class="available">
						<ul>
							<li>选择尺码:
								<select id="productSize">
								</select>
							</li>
							<li>购买数量:
								<input id="productNum" type="text" name="" value="1" style="width: 40px">
							</li>

						</ul>
					</div>
					<div style="margin-left: 20px">
						<a onclick="placeOrder()" href="#" class="cart item_add" style="width: 200px">立即购买</a><br>
						<a onclick="addToCart()" href="#" class="cart item_add" style="width: 200px; background: gray">添加到购物车</a>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
			<div class="content-top1" style="padding-left: 50px">
				<h2>您可能喜欢</h2><br>
				<div class="clearfix"> </div>
				<!--下部商品列表-->
				<div class="col-md-4 col-md3">
					<div class="col-md1 simpleCart_shelfItem">
						<a href="single.html">
							<img class="img-responsive" src="images/pi6.png" alt="" />
						</a>
						<h3><a href="single.html">Jeans</a></h3>
						<div class="price">
							<h5 class="item_price">$300</h5>
							<a href="#" class="item_add">Add To Cart</a>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-md3">
					<div class="col-md1 simpleCart_shelfItem">
						<a href="single.html">
							<img class="img-responsive" src="images/pi7.png" alt="" />
						</a>
						<h3><a href="single.html">Tops</a></h3>
						<div class="price">
							<h5 class="item_price">$300</h5>
							<a href="#" class="item_add">Add To Cart</a>
							<div class="clearfix"> </div>
						</div>

					</div>
				</div>
				<div class="col-md-4 col-md3">
					<div class="col-md1 simpleCart_shelfItem">
						<a href="single.html">
							<img class="img-responsive" src="images/pi.png" alt="" />
						</a>
						<h3><a href="single.html">Tops</a></h3>
						<div class="price">
							<h5 class="item_price">$300</h5>
							<a href="#" class="item_add">Add To Cart</a>
							<div class="clearfix"> </div>
						</div>

					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>

		<div class="clearfix"> </div>
		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="footer-top">
					<div class="col-md-4 top-footer1">
						<h2>Newsletter</h2>
						<form>
							<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
							<input type="submit" value="SUBSCRIBE">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="footer-bottom">
				<div class="container">
					<div class="col-md-3 footer-bottom-cate">
						<h6>Categories</h6>
						<ul>
							<li><a href="#">Curabitur sapien</a></li>
							<li><a href="#">Dignissim purus</a></li>
							<li><a href="#">Tempus pretium</a></li>
							<li><a href="#">Dignissim neque</a></li>
							<li><a href="#">Ornared id aliquet</a></li>

						</ul>
					</div>
					<div class="col-md-3 footer-bottom-cate">
						<h6>Feature Projects</h6>
						<ul>
							<li><a href="#">Curabitur sapien</a></li>
							<li><a href="#">Dignissim purus</a></li>
							<li><a href="#">Tempus pretium</a></li>
							<li><a href="#">Dignissim neque</a></li>
							<li><a href="#">Ornared id aliquet</a></li>

						</ul>
					</div>
					<div class="col-md-3 footer-bottom-cate">
						<h6>Top Brands</h6>
						<ul>
							<li><a href="#">Curabitur sapien</a></li>
							<li><a href="#">Dignissim purus</a></li>
							<li><a href="#">Tempus pretium</a></li>
							<li><a href="#">Dignissim neque</a></li>
							<li><a href="#">Ornared id aliquet</a></li>
							<li><a href="#">Ultrices id du</a></li>
							<li><a href="#">Commodo sit</a></li>

						</ul>
					</div>
					<div class="col-md-3 footer-bottom-cate cate-bottom">
						<h6>Our Address</h6>
						<ul>
							<li>Aliquam metus  dui. </li>
							<li>orci, ornareidquet</li>
							<li> ut,DUI.</li>
							<li>nisi, dignissim</li>
							<li>gravida at.</li>
							<li class="phone">PH : 6985792466</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
					<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
			</div>
		</div>
	</div>
</div>
		<!-- slide -->
		<script src="js/jquery.min.js"></script>
		<script src="js/imagezoom.js"></script>
		<!-- start menu -->
		<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/memenu.js"></script>
		<script>$(document).ready(function(){$(".memenu").memenu();});</script>
		<script src="js/simpleCart.min.js"> </script>
		<!--initiate accordion-->
		<script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu-drop > li > ul'),
                    menu_a  = $('.menu-drop > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
		</script>
		<!-- FlexSlider -->
		<script defer src="js/jquery.flexslider.js"></script>
		<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

		<!---pop-up-box---->
		<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
		<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
		<!---//pop-up-box---->
		<script>
            $(document).ready(function() {
                $('.popup-with-zoom-anim').magnificPopup({
                    type: 'inline',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    midClick: true,
                    removalDelay: 300,
                    mainClass: 'my-mfp-zoom-in'
                });

            });
		</script>
</body>
</html>
<script>

	var productid;
	var userid;

    //初次访问时得到一个商品的信息
    getProductInfo();

    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //已登录
                if(data.code==200){
                    var user = data.data.user;
                    userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户信息函数
                    showUser(username);
                }else{
                    //调用显示缺省值的函数
                    showDefault();
                }
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //显示用户在线缺省值的函数
    function showDefault() {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log'><a href='account.html'  >登陆</a>"+
            "<span>or</span><a  href='register.html'  >注册</a></p>");
    }

    //得到一个商品的详细信息
    function getProductInfo() {
        var url = window.location.search; /* 获取属性（“?”后面的分段） */
        var data = url.split("?");
        $.ajax({
            type: 'get',
            url: '/product/selectById',
            data: data[1],
            cache: false,
            dataType: 'json',
            success: function (data) {
                //调用显示商品信息函数
                showProduct(data);
            }
        })
    }

    //显示商品信息
    function showProduct(data) {
        productid = data.productid;
        var productname = data.productname;
        var productprice = data.productprice;
        var producttype = data.producttype;
        var imageurl = data.imageurl;
        var productdate = data.productdate;
        var productnum = data.productnum;
        var productsales = data.productsales;

        //刷新商品名
        $("#productName").empty();
        $("#productName").append("<h1>"+ productname +"</h1>");

        //刷新价格
        $("#productPrice").empty();
        $("#productPrice").append("<label  class='add-to item_price'>￥"+ productprice +"</label>");

        //刷新尺码表
        $("#productSize").empty();
        //判断是否是鞋类
        if(producttype.split(",4,").length>1){
            $("#productSize").append("<option>37</option>"+
                "<option>38</option>"+
                "<option>39</option>"+
                "<option>40</option>"+
                "<option>41</option>"+
                "<option>42</option>"+
                "<option>43</option>"+
                "<option>44</option>"+
                "<option>45</option>");
		}else{
            $("#productSize").append("<option>165</option>"+
                "<option>170</option>"+
                "<option>175</option>"+
                "<option>180</option>"+
                "<option>185</option>"+
                "<option>190</option>");
		}

        //刷新图片
		for(var i=1; i<5; i++){
            var id = "#imageUrl" + i;
            $(id).empty();
            $(id).append("<img src='../"+ imageurl +"' />");
		}
		//调用显示大图的函数
        showImage();
    }

    //图片放大镜特效
    function showImage() {

        var magnifierConfig = {
            magnifier : "#magnifier1",//最外层的大容器
            width : 400,//承载容器宽
            height : 460,//承载容器高
            moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
            zoom : 3//缩放比例
        };

        var _magnifier = magnifier(magnifierConfig);

        /*magnifier的内置函数调用*/
        /*
            //设置magnifier函数的index属性
            _magnifier.setIndex(1);

            //重新载入主图,根据magnifier函数的index属性
            _magnifier.eqImg();
        */
    }

    //添加到购物车
    function addToCart() {
        //获得数量信息和尺寸信息
        var productnum = $("#productNum").val();
        var productsize = $("#productSize").find("option:selected").text();
        $.ajax({
            type: 'get',
            url: '/orders/addToCart',
            data: 'productid='+productid+'&productnum='+productnum+'&productsize='+productsize+'&userid='+userid,
            cache: false,
            dataType: 'json',
            success: function (data) {
                //判定是否登陆，未登录则跳转到登陆界面
                if(data.status == 401){
                    //提示需要登陆并停止一秒
                    layer.msg(data.data);
                    var start = new Date().getTime();
                    while(true)  if(new Date().getTime()-start > 1000) break;
					//跳转到登陆
					window.location.href="account.html";
				}else{
                    layer.msg(data.data);
				}
            }
        })
    }

    //创建订单
    function placeOrder() {
        var productnum = $("#productNum").val();
        var productsize = $("#productSize").find("option:selected").text();
        if(userid == null){
            layer.msg("请先登录！")
		}else {
            //弹窗
            layer.open({
                type: 2,
                area: ['600px', '520px'],
                skin: 'layui-layer-rim', //加上边框
                content: ['placeOrder.html?orderId=&productId='+productid+'&productNum='+productnum+'&productSize='+productsize, 'no']
            });
		}

    }


</script>